<template>
  <div>
    <!-- 最底层 -->
    <div class="textIssue">
      <div class="issueChangeOne" v-show="isShowComment">
        <input type="text" v-model="CommentSendData" @focus="isShowCommentFocus" placeholder="写跟帖" />
        <div>
          <span class="iconfont iconpinglun-">
            <em class="redNumber">666</em>
          </span>
          <span class="iconfont iconshoucang"></span>
          <span class="iconfont iconfenxiang"></span>
        </div>
      </div>
      <div class="issueChangeTwo" v-show="!isShowComment">
        <textarea v-model="CommentSendData" @blur="isShowBlurComment" ref="textareaDom"></textarea>
        <span @click="CommenSendClick">发送</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      CommentSendData: "",
      isShowComment: true
    };
  },
  props: ["isShowCommetntText"],
  watch: {
    isShowCommetntText() {
      this.isShowComment = false;
    }
  },
  methods: {
    // ? 获取焦点
    isShowCommentFocus() {
      this.isShowComment = false;

      this.$nextTick(function() {
        this.$refs.textareaDom.focus();
      });
    },
    // ? 失去焦点
    isShowBlurComment() {
      //  this.$nextTick(function(){
      //    })
      setTimeout(
        function() {
          this.isShowComment = true;
        }.bind(this),
        200
      );
    },
    // !点击发送评论
    CommenSendClick() {
      this.$emit("CommenSendClick", this.CommentSendData);
      this.CommentSendData = "";
    }
  },
  mounted() {
    // console.log('11');
    
  },
};
</script>
<style lang="less" scoped>
// 底部跟帖
.textIssue {
  padding: 2.778vw;
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: 100%;
  box-sizing: border-box;
  background: #f2f2f2;
  .issueChangeOne {
    display: flex;
    justify-content: space-between;
    input {
      width: 48.611vw;
      height: 7.222vw;
      border-radius: 3.611vw;
      background: #d7d7d7;
      border: none;
      outline: none;
      text-indent: 1em;
    }
    div {
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      span {
        position: relative;
        font-size: 5vw;
      }
      .redNumber {
        width: 9.444vw;
        height: 4.444vw;
        line-height: 4.444vw;
        text-align: center;
        background: red;
        color: white;
        position: absolute;
        top: -2.5vw;
        left: 0.833vw;
        border-radius: 1.389vw;
      }
    }
  }
  .issueChangeTwo {
    display: flex;
    align-items: flex-end;
    textarea {
      padding: 10px;
      width: 70.833vw;
      height: 25vw;
      resize: none;
      background-color: #d7d7d7;
      border-radius: 4.167vw;
      border: 0;
    }
    span {
      margin-left: 5px;
      background: red;
      color: white;
      width: 18.056vw;
      height: 6.944vw;
      line-height: 25px;
      border-radius: 3.333vw;
      text-align: center;
    }
  }
}
</style>